<template>
  <div class="page_view at home_page" ref="v_list">
    <swiper></swiper>
    <van-tabs sticky swipeable animated v-model="tabIndex">
      <van-tab v-for="(tItem, tIndex) in tabList" :title="tItem.name" :key="tIndex">
        <van-list
          v-model="tItem.page.loading"
          :finished="tItem.page.finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="goods_list">
            <goods-item v-for="(gItem, gIndex) in tItem.list" :key="gIndex" :item="gItem"></goods-item>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import Swiper from '../../components/home/Swiper/index'
import GoodsItem from '../../components/home/GoodsItem/index'
export default {
  components: {
    Swiper,
    GoodsItem
  },
  name: 'home',
  data () {
    return {
      scrollY: 0,
      tabIndex: 0,
      tabList: [
        {
          name: '商务系列',
          id: 1,
          page: {
            loading: false,
            finished: false,
            error: false
          },
          list: [
            {
              title: '超狸1号',
              imagePath: 'https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/zzzzz/c1.png'
            },
            {
              title: '小团子',
              imagePath: 'https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/zzzzz/c2.png'
            }
          ]
        },
        {
          name: '运动系列',
          id: 2,
          page: {
            loading: false,
            finished: false,
            error: false
          },
          list: [
            {
              title: '超狸1号',
              imagePath: 'https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/zzzzz/c1.png'
            },
            {
              title: '小团子',
              imagePath: 'https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/zzzzz/c2.png'
            }
          ]
        },
        {
          name: '时尚系列',
          id: 3,
          page: {
            loading: false,
            finished: false,
            error: false
          },
          list: [
            {
              title: '超狸1号',
              imagePath: 'https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/zzzzz/c1.png'
            },
            {
              title: '小团子',
              imagePath: 'https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/zzzzz/c2.png'
            }
          ]
        },
        {
          name: '特能系列',
          id: 4,
          page: {
            loading: false,
            finished: false,
            error: false
          },
          list: [
            {
              title: '超狸1号',
              imagePath: 'https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/zzzzz/c1.png'
            },
            {
              title: '小团子',
              imagePath: 'https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/zzzzz/c2.png'
            }
          ]
        }
      ]
    }
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      console.log('加载'+this.tabIndex)
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          let item = {
            title: '超狸1号',
            imagePath: 'https://yuan-1252477692.cos.ap-guangzhou.myqcloud.com/zzzzz/c1.png'
          }
          if (i % 6 === 0) {
            item.imagePath = item.imagePath + 'err'
          }
          this.tabList[this.tabIndex].list.push(item);
        }

        // 加载状态结束
        this.tabList[this.tabIndex].page.loading = false;
        // 数据全部加载完成
        if (this.tabList[this.tabIndex].list.length >= 40) {
          this.tabList[this.tabIndex].page.finished = true;
        }
      }, 1000);
    }
  },
  watch:{
    tabIndex() {
      this.$refs.v_list.scrollTop = 0
    }
  },
  activated() {
    this.$tools.setScroller(this, 'v_list', true)
  },
  deactivated(){
    this.$tools.saveScroller(this, 'v_list', true)
  }
}
</script>

<style scoped lang="less">
  .goods_list{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
</style>
